<!-- 单个商品组件 -->

<template>
  <div class="aside">
    <div class="left" @click="detailPage(id)"><img class="img" :src="goodsCover" /></div>
    <div class="right">
      <div class="title" @click="detailPage(id)">{{ goodsName }}</div>
      <div class="bottom">
        <div class="price">￥{{ price }}</div>
        <div class="buttom"><button class="buttom">发送</button></div>
      </div>
    </div>

  </div>
</template>
  
<script setup>

import { useRouter } from "vue-router";

const router = useRouter();

/**
 * 接收consult.vue传过来的商品信息
 */
const props = defineProps({
  id: {
    type: Number,
  },
  goodsCover: {
    type: String,
  },
  goodsName: {
    type: String,
  },
  price: {
    type: Number,
  }

});

/**
 * 携带商品id跳转详情页测试
 * @param {number} id 
 */
const detailPage = (id) => {
  console.log(id);
  router.push({
    name: 'text',
    query: {
      id: id

    }
  });
}

</script>
  
  
<style scoped>
.aside {
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-bottom: solid 1px lightgray;
  margin-top: 20px;
  cursor: pointer;
}

.left {
  width: 100px;
  height: 100px;
}

.img {
  width: 100px;
  height: 100px;

}

.right {
  width: 200px;
  height: 60px;
  display: flex;
  flex-direction: column;

}

.title {
  font-size: smaller;
  max-lines: 2;
}

.bottom {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;

}

.price {
  color: #ff534c;
  font-size: large;
}

.buttom {
  width: 60px;
  height: 30px;
  font-size: smaller;
  background-color: white;
  border: solid 1px lightgray;
  border-radius: 5px;
  color: gray;
  cursor: pointer;
}</style>
  